<template>
  <div class="sub">
    <el-tabs v-model="subActiveName" @tab-click="handleClick">
      <el-tab-pane v-for="(item, index) in subTabsList" :key="index" :label="item.name" :name="String(item.component)" :data-id="item.component" lazy>
        <component :is="item.component" :project-id="projectId" />
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script>
import information from '@/views/project/info/sub/subNavTabsPages/information.vue'
import completion from '@/views/project/info/sub/subNavTabsPages/completion.vue'

export default {
  name: 'BasicInfos',
  components: { information, completion },

  props: {
    info: { type: Object, default: null },
    projectId: { type: String, default: '' }
  },
  data() {
    return {
      subTabsList: [
        { component: 'information', name: '竣工验收备案信息' },
        { component: 'completion', name: '竣工验收' }
      ],
      subActiveName: 'information'
    }
  },
  created() {

  },
  methods: {
    handleClick(tab) {
      // this.activeNames = tab.name
    }
  }
}
</script>

<style scoped>
.sub {
  padding: 20px;
}
.content{
  margin-top: 20px;
}
.sub ::v-deep .el-tabs__item{
  border: 1px solid #E8E8E8;
  border-radius: 5px;
  margin-right: 10px;
  padding: 0 20px !important;
}
.sub ::v-deep .el-tabs__nav-wrap::after{
  height: 0;
}
.sub ::v-deep .el-tabs__active-bar{
  height: 0;
}
.sub ::v-deep .el-tabs__item.is-active{
  border-top: 1px solid #409eff!important;
  border: 1px solid #409eff;
  border-radius: 5px;
  color: #409eff;
  padding: 0 20px!important;
}
.sub ::v-deep .el-tabs__item{
  font-size: 15px;
  color: #5A5A5A;

}
.sub ::v-deep .el-tabs__item:hover{
  color: #409eff;
}
</style>
